<template>
  <div>
    <el-form :inline="true" size="mini" @submit.native.prevent="GetList">
      <el-form-item label="ID">
        <el-input v-model="where['id']" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="where['phone']" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">查询</el-button>
        <el-button @click="where={};GetList()">清除</el-button>
        <el-button @click="DownloadList()">下载所有用户数据</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="mini_openid" label="微信Id"/>
      <el-table-column prop="nickname" label="用户昵称"/>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="头像">
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">{{ ['未知', '男', '女'][scope.row.sex] }}</template>
      </el-table-column>
      <!-- <el-table-column label="状态">
        <template slot-scope="scope">{{ ['禁用', '正常'][scope.row.status] }}</template>
      </el-table-column> -->
      <el-table-column prop="phone" label="手机号"/>
      <el-table-column prop="created_at" label="注册时间" />
      <!-- <el-table-column label="操作" width="120px">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.status === 1"
            v-model="scope.row.showForbidden"
            placement="top"
          >
            <p>确定禁用 {{ scope.row.account }} ？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="scope.row.showForbidden = false">取消</el-button>
              <el-button size="mini" type="primary" @click="Forbidden(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" size="mini" type="danger">禁用</el-button>
          </el-popover>
          <el-popover v-if="scope.row.status === 0" v-model="scope.row.showInvoke" placement="top">
            <p>确定启用 {{ scope.row.account }} ？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="scope.row.showInvoke = false">取消</el-button>
              <el-button size="mini" type="primary" @click="Invoke(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" size="mini" type="success">启用</el-button>
          </el-popover>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      :current-page="listInfo.current_page"
      :total="listInfo.total"
      :page-size="listInfo.per_page"
      background
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="size => GetList(1, size)"
      @current-change="(page, size) => GetList(page)"
    />
  </div>
</template>

<script>
import countryCode from '@/components/CountryCode/CountryCode.vue'
export default {
  name: 'PersonManage',
  components: {
    countryCode
  },
  data() {
    return {
      where: {},
      listInfo: {},
      list: [],
      loading: true
    }
  },
  mounted() {
    this.GetList()
  },
  methods: {
    /**
     *  获取列表
     */
    GetList(page = 1, size) {
      this.loading = true
      size = size || 10
      const params = { page, size, ...this.where }
      this.$http.get('users', { params }).then(response => {
        this.listInfo = response.meta
        this.list = response.resource
        this.loading = false
      })
    },
    /**
     * 下载
     */
    DownloadList() {
      this.$http
        .get('users/excel', { responseType: 'blob' })
        .then(response => {
          this.$download(response, 'persons.xlsx')
        })
    },
    /**
     * 禁用
     */
    Forbidden(vo) {
      this.$http
        .put('users/' + vo.id + '/forbidden')
        .then(response => {
          this.GetList(this.listInfo.current_page, this.listInfo.per_page)
          this.$success('操作成功')
        })
    },
    /**
     * 启用
     */
    Invoke(vo) {
      this.$http.put('users/' + vo.id + '/invoke').then(response => {
        this.GetList(this.listInfo.current_page, this.listInfo.per_page)
        this.$success('操作成功')
      })
    },

    /**
     * 修改手机
     */
    ChangeMobile(vo) {
      const params = {
        now_mobile: vo.nowMobile,
        now_country_code: vo.nowCountryCode
      }
      this.$http
        .patch('users/' + vo.id + '/mobile', params)
        .then(response => {
          this.GetList(this.listInfo.current_page, this.listInfo.per_page)
          this.$success('操作成功')
        })
    }
  }
}
</script>

